<template>
  <div style="margin: 0 80px 0 80px;position: relative;z-index: 0;">
    <el-carousel :interval="5000" type="card" height="370px" trigger="click" indicator-position="outside">
      <el-carousel-item v-for="item in pics" :key="item">
        <img :src=getImageUrl(item.url) alt="" @click="toCarouselClick(item.name)" style="height: 100%;width: 100%;border:1px solid #000;" />
      </el-carousel-item>
    </el-carousel>
  </div>

  <favorite></favorite>

  <h1 style="text-align: center;margin-bottom: 10px;">热门推荐</h1>

  <el-row style="margin-bottom: 50px;justify-content: center;">
    <el-col v-for="(item, index) in hotProductPics" :key="item" :span="6" :offset="index > 0 ? 2 : 0">
      <el-card :body-style="{ padding: '0px' }">
        <img :src=getImageUrl(item.url) alt="" style="height: 100%;width: 100%;" />
        <div style="padding: 14px">
          <div style="font-size: 20px;padding: 10px">{{item.name}}</div>
          <div style="font-size: 16px;padding: 10px;color: rgb(201, 168, 106);">{{item.text}}</div>
          <div class="bottom">
            <el-button class="button" @click="buy(item.productId)" type="warning">立即选购</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>

  <el-row style="margin-bottom: 50px;justify-content: center;">
    <el-col v-for="(item, index) in hotProductPics_2" :key="item" :span="6" :offset="index > 0 ? 2 : 0">
      <el-card :body-style="{ padding: '0px' }">
        <img :src=getImageUrl(item.url) alt="" style="height: 100%;width: 100%;" />
        <div style="padding: 14px">
          <div style="font-size: 20px;padding: 14px">{{item.name}}</div>
          <div style="font-size: 15px;padding: 14px;color: rgb(201, 168, 106);">{{item.text}}</div>
          <div class="bottom">
              <el-button class="button" @click="buy(item.productId)" type="warning">立即选购</el-button>
          </div>
        </div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import api from "../../api/index"
import { onMounted, reactive } from 'vue';
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const currentDate = ref(new Date())

const getImageUrl = (url) => {
  return new URL(url, import.meta.url).href;
}

const buy = (name) => {
  router.push({path:`/main/product/${name}`})
}

const toCarouselClick =(name)=>{
  router.push({path:`/main/product/${name}`})
}

const pics = [
  { url: "../../assets/images/bxg.png",name:"CHEESE-03" },
  { url: "../../assets/images/jr.png",name:"CHEESE-01" },
  { url: "../../assets/images/hbq.png",name:"CHOCO-01" },
]

const hotProductPics = [
  { url: "../../assets/images/black.jpg",name:"黑方",text:"黑巧克力与榛子，淡苦与干脆，浓香丰满",productId:"CHOCO-03" },
  { url: "../../assets/images/bwCHOCO.jpg",name:"黑白巧",text:"口感冰凉细腻，白巧克力慕斯的甜，与底部黑巧克力酱的苦",productId:"CHOCO-01" },
  { url: "../../assets/images/deerpBIRTHDAY.jpg",name:"德尔皮生日",text:"联名限定款",productId:"MUSI-01" },
]

const hotProductPics_2 = [
  { url: "../../assets/images/forzenMUSI.jpg",name:"冻慕斯与焗芝士",text:"新鲜奶油慕斯，平滑叠加降温至4度的现焗法国软芝士，轻盐味，诱发原香，丰富甜",productId:"CHEESE-02" },
  { url: "../../assets/images/jerry.jpg",name:"杰瑞",text:"谁动了我的奶酪？!",productId:"CHEESE-01" },
  { url: "../../assets/images/orange.jpg",name:"橘与橙",text:"像切开一只柑橘鲜果",productId:"FRUIT-01" },
]

</script>

<style scoped>
.time {
  font-size: 12px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
  margin-bottom: 50px;
}

.button {
  padding: 18px;
  float: right;
}

.image {
  width: 100%;
  display: block;
}


</style>